<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-列表渲染-实例1-select</title>
</head>
<body>
<div id="app">
    <select @change="cityChange" v-model="selected">
        <option v-for="city in cities" :value="city.id">
            {{city.name}}
        </option>
    </select>
    <select>
        <option v-for="area in areas" :value="area.id">
            {{area.name}}
        </option>

    </select>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            cities: [
                {
                    id: 1,
                    name: '北京',
                    areas: [
                        {
                            id: 11,
                            name: '东城区'
                        },
                        {
                            id: 12,
                            name: '西城区'
                        }

                    ]
                }, {
                    id: 2,
                    name: '天津',
                    areas: [
                        {
                            id: 21,
                            name: '河西区'
                        }, {
                            id: 22,
                            name: '和平区'
                        }
                    ]
                }
            ], areas: [],
            selected: 1
        }, methods: {
            cityChange: function () {
                var _this = this;
                this.areas = this.cities.find((item) => item.id == _this.selected).areas;
            }
        }
    })

</script>
</html>